

//签名框字数回显
function numTest(){
    let sign = $('#sign')
    let textNum = sign.val().length
    let remainNum = 20 - textNum
    let textNumDom = $('#textNum')
    if(remainNum > 0){

        textNumDom.text(remainNum)
        if(remainNum <= 5){

            textNumDom.css('color','red')
        }else{
            textNumDom.css('color','grey')
        }

    }else{
        textNumDom.text(0)
        textNumDom.css('color','red')
    }
}
//头像上传
layui.use(['upload', 'element', 'layer','laydate'], function() {
    let $ = layui.jquery
        , upload = layui.upload
        , element = layui.element
        , layer = layui.layer
        , imgUrl = ''
        , laydate = layui.laydate;


    $(document).ready(function (){
        //点击签名输入框后显示字数提示符
        let sign = $('#sign')

        sign.focus(function (){
            $('#textNumTip').show()
            //输入监测
            numTest()
           let flag = true;
            sign.on({
                compositionstart:function(){flag = false;},
                compositionend:function(){flag = true;},
                input:function (){
                    let _this = this;
                    setTimeout(function(){
                        if(flag){
                            numTest()
                            console.log($(_this).val());
                        }
                    },0);
                }
            })

        })
        sign.blur(function (){
            $('#textNumTip').hide()
        })

        //没有选择文件就点提交的提示
        $('#img_upload_click').click(function (){
            if(imgUrl === ''){
                layer.msg('请选择文件')

            }
        })

        //重置图片
        $('#img_reset_click').click(function (){
            history.go(0)
        })


    })

    //常规使用 - 普通图片上传
    let uploadInst = upload.render({
        elem: '#img_choose_click'
        // , url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        ,url:$('#portraitUpload').attr('action')
        , accept:'images'
        , acceptMime: 'image/png'
        , exts: 'png'
        , auto: false
        , bindAction: '#img_upload_click'
        , multiple: false
        , size: 52
        , choose: function (obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
                $('#img').attr('src', result); //图片链接（base64）
                imgUrl = result
            });
        }
        , before: function (obj) {
            element.progress('progress', '0%'); //进度条复位
            layer.msg('上传中', {icon: 16, time: 0});
        }
        , done: function (res) {
            //如果上传失败
            if (res.code !== 200) {
                return layer.msg('上传失败');
            }
            //上传成功的一些操作
            //……
            $('#demoText').html(''); //置空上传失败的状态
            imgUrl =''
        }
        , error: function () {
            //演示失败状态，并实现重传
            let demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
        //进度条
        , progress: function (n, elem, e) {
            element.progress('progress', n + '%'); //可配合 layui 进度条元素使用
            if (n === 100) {
                layer.msg('上传完毕', {icon: 1});
            }
        }
    });

    //生日选择框
    laydate.render({
        elem: '#date1' ,//指定元素
        done: function (value){
            alert(value)
        }
    });






})

//个人信息表单
let formVue = new Vue({
    el: '#submitForm',
    data:{
        id: $('#showUserId').val(),
        username: $('#setUsername').val(),
        birthday: $('#date1').val(),
        email: $('#email').val(),
        sign: $('#sign').val()
    },

    methods:{
        submit:function (event) {
            event.preventDefault()
            this.id = $('#showUserId').val()
            this.username = $('#setUsername').val()
            this.birthday = $('#date1').val()
            this.email = $('#email').val()
            this.sign = $('#sign').val()
            alert(
                "id: " +
                this.id +
                "\nusername: " +
                this.username +
                "\nbirthday: " +
                this.birthday +
                "\nemail: " +
                this.email +
                "\nsign: " +
                this.sign
            )
            if (this.id === '') {
                layer.msg("id为空")
            } else if (this.username === '') {
                layer.msg("用户名为空")
            } else if (!new RegExp('^[a-zA-Z0-9_-]{4,16}$').test(this.username)) {
                layer.msg("用户名非法")
            } else if (this.email !=='' && !new RegExp('^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$').test(this.email)) {
                layer.msg("无效邮箱")
            } else if (this.sign !=='' && !new RegExp('^([\u4e00-\u9fa5]|.|[a-zA-Z0-9_-]){0,20}$').test(this.sign)) {
                layer.msg("不能超过20字")
            }else{
                let url = $('#userInfoUpload').attr("action")
                alert(url)
                axios({
                    method: 'post',
                    url:url,
                    data:{
                        userInfo:{
                            id: this.id,
                            username: this.username,
                            birthday: this.birthday,
                            email: this.email,
                            sign: this.sign
                        }
                    }
                }).then(function (res) {
                    if(res.data.code === 200){
                        layer.msg("资料上传成功！")
                    }else if(res.data.code === 400) {
                        layer.msg("用户名已被使用！")
                    }else{
                        layer.msg("上传出现了一点问题，请稍后再试")
                    }
                })
            }
        }
    }
})
